<template>
	<div id="">
		<nav-header >
			<div class="" slot="left"></div>
		</nav-header>
		<page class="page" @onScroll="_onScroll" :probeType="3" :pulldown="true">
			<div class="home-header"  slot="header">
				<span :style="{fontSize:30*scale + 'px',marginRight:40*scale + 'px'}" class="recommend" :class="[ type == 'index'? 'active': '' ]" @click="changeType('index')">推荐</span>
				<span :style="{fontSize:30*scale + 'px'}" class="recommend" :class="[ type == 'classify'? 'active': '' ]" @click="changeType('classify')">分类</span>
			</div>
			<div class="body">
				<transition name='fade' mode='out-in'>
					<index v-if="type == 'index'" :goodsList='indexData' ></index>
					<classify  v-else :data='classifyData' ></classify>
				</transition>
			</div>
		</page>
		<tabBar-footer></tabBar-footer>
	</div>
</template>

<script>
	import header from "@/components/header/header"
	import ScrollView from '@/base/scroll-view/scroll-view'
	import footer from "@/components/footer/footer"
	import Classify from "@/pages/index/classify/classify"
	import Index from "@/pages/index/index/index"
	import {mapGetters, mapState, mapActions} from 'vuex';
	export default {
		data() {
			return {
				type: 'index',
				scale: 1,
				active: "active",
				data: null,
				show: true
			}
		},
		computed: {
			...mapState(['indexData','classifyData'])
		},
		watch:{
			type: function(val,oldval){
				this.data = oldval == 'index' ? this.indexData : this.classifyData
			}
		},
		mounted() {
		},
		methods: {
			...mapActions(['getIndexDataAsyn','getIndexClassifyAsyn']),
			_onScroll(e) {
				this.handleScroll(e);
			},
			handleScroll(e) {
				var scrolltop = e.y;
	
				if (scrolltop >= 0) {
					scrolltop = 0
				} else if(scrolltop >= -300) {
					scrolltop = Math.abs(scrolltop);
				} else {
					scrolltop = 300
				}
				var scale = (600 - scrolltop) / 600;
				this.scale = scale;
			},
			changeType(type) {
				this.type = type
			}
		},
		created() {
			this.getIndexDataAsyn()
			this.getIndexClassifyAsyn()
			
		},
		components: {
			"nav-header": header,
			"tabBar-footer": footer,
			'index': Index,
			'classify': Classify,
			'scroll-view': ScrollView
		}
	}
</script>
<style lang="scss">

</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	.page {
		background-color: #FFFFFF;
		.home-header {
			position: fixed;
			top: 89px;
			left: 0px;
			right: 0px;
			padding: 15px 40px;
			background-color: #fff;
			font-size: 0;
			z-index: 2033;
		}
		.body {
			padding: 100px 40px 0;		
		}
		.list-content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0 40px;
			overflow: hidden;
		}
		.recommend {
			margin-right: 80px;
			color: #C4C4C4;
		}
		.active {
			color: #4A4A4A;
		}
		.choiceness-product {
			margin: 30px 0;
			.choiceness-product-title {
				display: block;
				color: #4a4a4a;
				font-size: 40px;
				margin-bottom: 60px;
			}
			.choiceness-product-scroll {
				display: flex;
				overflow-x: scroll;
			}
		}
	}
</style>